<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="d3-tip.css">
    
</head>
<body>
    <text dominant-baseline=""></text>
    <script src="d3.min.js"></script>
    <!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
    <script src="d3-tip.js"></script>
    <script>
        const width = 800 ;
        const height = 800 ;
        const margin = 50 ;

        const svg = d3.select('body').append('svg');
        svg.attr('width',width);
        svg.attr('height',height);
        svg.style('border','2px solid #ccc');

        const data = {
            a: "Eve",
            c:0,
            b: [
                {a: "Cain",c:6},
                {a: "Seth", c:0,b: [{a: "Enos",c:4}, {a: "Noam",c:5}]},
                {a: "Abel",c:20},
                {a: "Awan", c:0,b: [{a: "Enoch",c:10},{a:"Jon",c:4}]},
                {a: "Azura",c:8},
                {a:"a",c:0,b:[{a:'a1',c:6},{a:'a2',c:8}]},
                {a:"b",c:0,b:[{a:'b1',c:4},{a:'b2',c:3}]},
                {a:"c",c:0,b:[{a:'c1',c:2},{a:'c2',c:8}]},
                {a:"d",c:10}
            ]
        }
        let root = d3.hierarchy(data,d=>d.b);
        // const node = root.sort((a,b)=>{
        //     return a.data.c - b.data.c
        // })
        // root.sum(function(){
        //     console.log(arguments);
        // })

        // const data = [
        //     {"name": "Eve",   "parent": ""},
        //     {"name": "Cain",  "parent": "Eve"},
        //     {"name": "Seth",  "parent": "Eve"},
        //     {"name": "Enos",  "parent": "Seth"},
        //     {"name": "Noam",  "parent": "Seth"},
        //     {"name": "Abel",  "parent": "Eve"},
        //     {"name": "Awan",  "parent": "Eve"},
        //     {"name": "Enoch", "parent": "Awan"},
        //     {"name": "Azura", "parent": "Eve"}
        // ]
        
        // const s = d3.stratify()
        //     .id(d=>d.name)
        //     .parentId(d=>d.parent)
        // let root = s(data);    
        // const paths = [
        // "axes.js",
        // "channel.js",
        // "context.js",
        // "legends.js",
        // "legends/ramp.js",
        // "marks/density.js",
        // "marks/dot.js",
        // "marks/frame.js",
        // "scales/diverging.js",
        // "scales/index.js",
        // "scales/ordinal.js",
        // "stats.js",
        // "style.js",
        // "transforms/basic.js",
        // "transforms/bin.js",
        // "transforms/centroid.js",
        // "warnings.js",
        // ];
        // const root = d3.stratify().path((d) => d)(paths);

        const g = svg.append('g').attr('transform','translate(50,50)')

        // const tree = d3.tree()
        //     //.size([2*Math.PI,200])
        //     .size([height-200,width-200])
        //     //.nodeSize([40,200])
        // root = tree(root)

        // const cluster = d3.cluster()
        //     //.nodeSize([40,200])
        //     .size([height-200,width-200])
        // root = cluster(root)    

        
        // g.selectAll('circle')
        //     .data(root.descendants())
        //     .join('circle')
        //     .attr('cx',d=>d.y)
        //     .attr('cy',d=>d.x)
        //     .attr('r',3)
            
        // g.selectAll('path')
        //   .data(root.links())
        //   .join('path')
        //   .attr('d',d3.link(d3.curveBumpX).x(d=>d.y).y(d=>d.x))
        //   .attr('fill','none')
        //   .attr('stroke','#666')

        // g.selectAll('text')
        //  .data(root.descendants())
        //  .join('text')
        //  .attr('x',d=>d.children?d.y-6:d.y+6)
        //  .attr('y',d=>d.x)
        //  .text(d=>d.id)
        //  .attr('font-size',12)
        //  .attr('text-anchor',d=>d.children?'end':'start')
        //  .attr('dominant-baseline','middle')
        //  .attr("paint-order", "stroke")
        //  .attr('fill','#666')
        //  .attr('stroke','#fff')
        
        const c = d3.scaleOrdinal()
            .domain(root.children.map(d=>d.data.a))
            .range(d3.schemeCategory10)

        const partition = d3.partition()
            .size([2*Math.PI,250])
            //.size([height-100,width-100])
            .round(false)
            .padding(0.01)

        root = partition(root.sum(d=>d.c).sort((a,b)=>a.value-b.value));    

        // g.selectAll('rect')
        //     .data(root.descendants())
        //     .join('rect')
        //     .attr('y',d=>d.x0)
        //     .attr('x',d=>d.y0)
        //     .attr('height',d=>d.x1-d.x0)
        //     .attr('width',d=>d.y1-d.y0)
        //     .attr('fill',d=>d.parent?c(d.ancestors().reverse()[1].data.a):'#ccc')
        //     .attr('stroke','#ccc')


        // g.selectAll('text')
        //     .data(root.descendants())
        //     .join('text')
        //     .attr('x',d=>d.y0 + (d.y1-d.y0)/2)
        //     .attr('y',d=>d.x0 + (d.x1-d.x0)/2)
        //     .attr('text-anchor','middle')
        //     .attr('dominant-baseline','middle')
        //     .text(d=>d.data.a)   
        //     .attr('font-size',12) 


        const arc = d3.arc()
            .startAngle(d=>d.x0)
            .endAngle(d=>d.x1)
            .innerRadius(d=>d.y0)
            .outerRadius(d=>d.y1)

        g.attr('transform',`translate(${width/2},${height/2})`)
        g.selectAll('path')
            .data(root.descendants().filter(d=>d.parent!=null))
            .join('path')
            .attr('d',arc)
            .attr('fill',d=>d.parent?c(d.ancestors().reverse()[1].data.a):'#ccc')
            .attr('stroke','#ccc')    
            
        g.selectAll('text')
            .data(root.descendants())
            .join('text')
            .attr('text-anchor','middle')
            .attr('dominant-baseline','middle')
            .text(d=>d.data.a)    
            .attr('transform',d=>{
                let a ;
                let r ;
                if(d.x0 == 0 && d.y0==0){
                    a = 0;
                    r = 0 ;
                }else{
                    a = (d.x1+d.x0)/2 * 180 / Math.PI ;
                    r = (d.y1+d.y0)/2 ;
                }
                return  `rotate(${a==0?0:a-90}),translate(${r},0) rotate(${a<180?0:180})`
            })


        // const pack = d3.pack()
        //     .size([width-100,height-100])
        //     .padding(0)

        // root = pack(root.sum(d=>d.c).sort((a,b)=>a.value-b.value));    

        // g.selectAll('circle')
        //     .data(root.descendants())
        //     .join('circle')
        //     .attr('cx',d=>d.x)
        //     .attr('cy',d=>d.y)
        //     .attr('r',d=>d.r)
        //     .attr('fill',d=>d3.interpolateSinebow(d.depth/root.height/2))
        //     .attr('stroke','#ccc')
        // g.selectAll('text')
        //     .data(root.leaves())
        //     .join('text')
        //     .attr('x',d=>d.x)
        //     .attr('y',d=>d.y)
        //     .text(d=>d.data.a)
        //     .attr('text-anchor','middle')
        //     .attr('dominant-baseline','middle')

        // const c = d3.scaleOrdinal()
        //     .domain(root.children.map(d=>d.data.a))
        //     .range(d3.schemePaired)
        // const map = d3.treemap()
        //     .size([width-100,height-100])
        //     .tile(d3.treemapBinary)
         
        // root = map(root.sum(d=>d.c).sort((a,b)=>a.value-b.value))
        
        // g.selectAll('rect')
        //     .data(root.leaves().filter(d=>d.parent!=null))
        //     .join('rect')
        //     .attr('x',d=>d.x0)
        //     .attr('y',d=>d.y0)
        //     .attr('width',d=>d.x1-d.x0)
        //     .attr('height',d=>d.y1-d.y0)
        //     .attr('fill',d=>c(d.ancestors().reverse()[1].data.a))
        //     .attr('stroke','#ccc')

        // g.selectAll('text')
        //     .data(root.leaves())
        //     .join('text')
        //     .text(d=>d.data.a)
        //     .attr('x',d=>(d.x1+d.x0)/2)
        //     .attr('y',d=>(d.y1+d.y0)/2)
        //     .attr('text-anchor','middle')
        //     .attr('dominant-baseline','middle')    
    </script>
    <text dominant-baseline=""></text>
</body>
</html>